<!-- 此页面代码没用到 -->
<template>
  <div>
    <Form
      :model="modelForm"
      ref="editForm"
      class="ivu-form-no-margin-bottom"
      :rules="rule"
      :label-width="100"
    >
      <Form-item prop="accountType" :label="$t('module.accountType.accountType')">
        <Input v-model="modelForm.accountType" placeholder  :maxlength="50" />
      </Form-item>
      <Form-item prop="protocolType" :label="$t('module.accountType.protocolType')">
        <!-- <Input v-model="modelForm.protocolType" placeholder=""  :maxlength="50" /> -->
        <Select v-model="modelForm.protocolType" style="width:200px">
          <Option
            v-for="item in protocolTypeList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item prop="protocolParameter" :label="$t('module.accountType.protocolParameter')">
        <Input
          v-model="modelForm.protocolParameter"
          type="textarea"
          :rows="4"
          placeholder
          
          :maxlength="2000"
        />
      </Form-item>
    </Form>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    accountTypeId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      modelForm: {
        accountType: "",
        protocolType: "",
        protocolParameter: "",
        enabled: 1
      },
      rule: {
        accountType: [
          {
            required: true,
            message: "请输入 " + this.$t("module.accountType.accountType"),
            trigger: "blur"
          }
        ],
        protocolType: [
          {
            required: true,
            message: "请选择 " + this.$t("module.accountType.protocolType"),
            trigger: "blur"
          }
        ],
        protocolParameter: [
          {
            required: true,
            message: "请输入 " + this.$t("module.accountType.protocolParameter"),
            trigger: "blur"
          }
        ]
      },
      protocolTypeList: [
        {
          value: "LDAP",
          label: "LDAP"
        },
        {
          value: "QQ",
          label: "QQ登录OAuth2.0"
        },
        {
          value: "WeiXin",
          label: "微信登录OAuth2.0"
        }
      ]
    };
  },
  computed: {},
  created: function() {
    if (this.accountTypeId) {
      this.$emit("SetTitle", "编辑账号类型");
    } else {
      this.$emit("SetTitle", "新增账号类型");
    }
    this.$emit("SetPageWidth", 600);
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        handle: () => {
          this.save();
        }
      },
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  beforeMount: function() {},
  mounted: function() {
    this.init();
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    init() {
      if (this.accountTypeId) {
        // $store.dispatch("GetRoleDetail", { id: this.accountTypeId }).then(response => {
        // });
        // window.$http
        //   .post(`${window.RPConfig.user}/editAccountType?accountTypeId=${this.accountTypeId}`)
        //   .then(response => response.data);
        this.modelForm = {
          accountType: "华润集团LDAP",
          protocolType: "LDAP",
          protocolParameter: "{xx:123}",
          enabled: 1
        };
      }
    },
    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.accountTypeId) {
            this.$message.success({
              content: this.$t("common.updateSuccess"),
              duration: 3
            });
          } else {
            this.$message.success({
              content: this.$t("common.createSuccess"),
              duration: 3
            });
          }

          this.$emit("Close", true);
        } else {
          this.$message.error({
            content: this.$t("common.formValidateFailed"),
            duration: 3
          });
          return 0;
        }
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
